import { ASelectIcon } from '../common/select.abstract';
import { createElement } from '../../../utils/dom-helper';
import { BorderType } from '../variate';
import { ColorPanel } from '../common/color-pannel';
import { Subject } from 'rxjs';
import './border-select.less';
class PureColorPanel extends ColorPanel{
    public show() {
        this.container.style.display = 'block';
    }
    public close() {
        this.container.style.display = 'none';
    }
}
export class BorderSelect extends ASelectIcon {
    protected color: string = '#000000'; 
    protected borderType: 'solid'|'dash' = 'solid';
    protected createEles() {
        let all = createElement('span', {'class': `icon iconfont icon-border-all`, zVal: String(BorderType.all),title: ''});
        let borderinside = createElement('span', {'class': `icon-item icon iconfont icon-borderinside`, zVal: String(BorderType.inside), title: '内部边框'});
        let borderleft = createElement('span', {'class': `icon-item icon iconfont icon-borderleft`,zVal:  String(BorderType.left),title: '内部边框'});
        let borderNone = createElement('span', {'class': `icon-item icon iconfont icon-border-none`,zVal:  String(BorderType.none), title: '无边框'});
        let borderTop = createElement('span', {'class': `icon-item icon iconfont icon-border-top`,zVal:  String(BorderType.top), title: '顶部边框'});
        let borderOuter = createElement('span', {'class': `icon-item icon iconfont icon-border-outer`,zVal:  String(BorderType.outer), title: '外部边框'});
        let borderRight = createElement('span', {'class': `icon-item icon iconfont icon-border-right`,zVal:  String(BorderType.right), title: '右侧边框'});
        let borderBottom = createElement('span', {'class': `icon-item icon iconfont icon-borderbottom`,zVal:  String(BorderType.bottom), title: '底部边框'});
        let group1 = createElement('div', {"class": 'group'});
        group1.appendChild(borderNone);
        group1.appendChild(all);
        group1.appendChild(borderOuter);
        group1.appendChild(borderinside);
        let group2 = createElement('div', {"class": 'group'});
        group2.appendChild(borderTop);
        group2.appendChild(borderRight);
        group2.appendChild(borderBottom);
        group2.appendChild(borderleft);
        // borderbottom
        this.container.appendChild(group1);
        this.container.appendChild(group2);
        let borderColorBtn = createElement('div', 'border-value-btn border-color-btn');
        borderColorBtn.innerHTML = `
        <div class="icon  icon-pen iconfont"></div>
        <div class="desc">边框颜色</div>
        <div class="child-status icon iconfont icon-right"></div>
        `;
        (borderColorBtn.querySelector('.icon-pen') as HTMLElement).style.color = this.color;
        let borderTypeBtn = createElement('div', 'border-value-btn border-type-btn');
        borderTypeBtn.innerHTML = `
        <div class="icon iconfont icon-ic_line_style"></div>
        <div class="desc">边框样式</div>
        <div class="child-status icon iconfont icon-right"></div>
        `;
        this.container.appendChild(borderColorBtn);
        this.container.appendChild(borderTypeBtn);
        let colorColorPanel = new PureColorPanel();
        let sub = new Subject();
        colorColorPanel.init((val: any) => {
            this.color = val;
            (borderColorBtn.querySelector('.icon-pen') as HTMLElement).style.color = val;
            return {};
        }, borderColorBtn, {statueChange$: sub});
        borderColorBtn.addEventListener('mouseover', () => {
            colorColorPanel.show();
        });
        borderColorBtn.addEventListener('mouseleave', () => {
            colorColorPanel.close();
        });

        let borderTypeContainer = createElement('div', 'border-type-container');
        let borderDashEle = createElement('div', 'border-type-item border-dash');
        let dashLine = createElement('span', 'line')
        borderDashEle.appendChild(dashLine);
        borderDashEle.addEventListener('click', () => {
            this.borderType = 'dash';
            borderDashEle.setAttribute('active', 'true');
            borderSolidEle.removeAttribute('active');
        });
        let borderSolidEle = createElement('div', 'border-type-item border-solid');
        let solidLine = createElement('span', 'line');
        borderSolidEle.appendChild(solidLine);
        borderSolidEle.addEventListener('click', () => {
            this.borderType = 'solid';
            borderSolidEle.setAttribute('active', 'true');
            borderDashEle.removeAttribute('active');
        });
        borderTypeContainer.appendChild(borderDashEle);
        borderTypeContainer.appendChild(borderSolidEle);
        borderTypeBtn.appendChild(borderTypeContainer);
        borderTypeContainer.addEventListener('click', (evt: MouseEvent) => {
            evt.stopPropagation();
            evt.preventDefault();
            return false;
        });
        borderTypeBtn.addEventListener('mouseover', () => {
            borderTypeContainer.style.display = 'block';
            dashLine.style.borderBottom = `2px dashed ${this.color}`;
            solidLine.style.borderBottom = `2px solid ${this.color}`;
            if(this.borderType == 'dash') {
                borderDashEle.setAttribute('active', 'true');
                borderSolidEle.removeAttribute('active');
            }
            if(this.borderType == 'solid') {
                borderSolidEle.setAttribute('active', 'true');
                borderDashEle.removeAttribute('active');
            }
        });
        borderTypeBtn.addEventListener('mouseout', () => {
            borderTypeContainer.style.display = 'none';
        });
    }
    protected createValue(evt: MouseEvent) {
        let value = Number((<HTMLElement>evt.target).getAttribute('zVal'));
        let res = {color: this.color, type: this.borderType, position: value};
        return res;
    }
    protected statusChange(value: {[key: string]: any}) {

    }
}